<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Chat Online</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <link rel="stylesheet" href="css/bootstrap-glyphicons.css" />
        <link rel="stylesheet" href="css/unicorn.login.css" />

        <link rel="stylesheet" href="css/unicorn.main.css" />
        <link rel="stylesheet" href="css/unicorn.grey.css" class="skin-color" />	
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

    </head>
    <body >
        <div style="position: absolute; z-index: -9999">
            <img src="img/char.png"/>
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-8" id="divToolChat"></div>
                <div id="main_left" class="col-4" style="float: right; position: absolute; left: 65%; top: 10px; height: 100%">
                    <div class="widget-box widget-chat" style="height:80%">
                        <div class="widget-title">
                            <span class="icon">
                                <i id="iIconTitle" class="glyphicon glyphicon-lock"></i>
                            </span>
                            <h5 id="h5Title">Login</h5>
                            <span class="icon" style="float: right">
                                <a href="#" class="glyphicon glyphicon-unchecked"></a>
                                <a href="#" class="glyphicon glyphicon-minus"></a>
                                <a href="#" class="glyphicon glyphicon-remove"></a>
                            </span>
                        </div>
                        <div class="widget-content nopadding" id="divContent">
                            <div id="loginbox" style="background: inherit; box-shadow: 0 0 0 #fff; width: auto;">            
                                <!--Form loginform-->
                                <form id="loginform" >
                                    <p>Enter username and password to continue.</p>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input class="form-control" type="text" placeholder="Username" />
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span><input class="form-control" type="password" placeholder="Password" />
                                    </div>
                                    <div class="row">
                                        <div class="col-4 col-lg-4"><a class="btn btn-small btn-block btn-primary" href="#">Facebook</a></div>
                                        <div class="col-4 col-lg-4"><a class="btn btn-small btn-block btn-info" href="#"><i class="glyphicon glyphicon-sign-in"></i> Twitter</a></div>
                                        <div class="col-4 col-lg-4"><a class="btn btn-small btn-block btn-danger" href="#">Google Plus</a></div>
                                    </div>
                                    <hr />
                                    <div class="form-actions">
                                        <div class="pull-left">
                                            <a href="#" class="flip-link to-recover">Lost password?</a><br />
                                            <a href="#" class="flip-link to-register">Need account? Register here!</a>
                                        </div>
                                        <div class="pull-right"><input type="button" class="btn btn-default" id="btnLogin" value="Login" /></div>
                                    </div>
                                </form>
                                <!--Form recoverform-->
                                <form id="recoverform" action="#">
                                    <p>Enter your e-mail address below and we will send you instructions how to recover a password.</p>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input class="form-control" type="text" placeholder="E-mail address" />
                                    </div>
                                    <hr />
                                    <div class="form-actions">
                                        <div class="pull-left">
                                            <a href="#" class="flip-link to-login">&laquo; Back to login</a><br />
                                            <a href="#" class="flip-link to-register">Need account? Register here!</a>
                                        </div>
                                        <div class="pull-right"><input type="submit" class="btn btn-default" value="Recover" /></div>
                                    </div>
                                </form>
                                <!--Form registerform-->
                                <form id="registerform" action="#">
                                    <p>Enter information required to register:</p>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input class="form-control" type="text" placeholder="Enter Username" />
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span><input class="form-control" type="password" placeholder="Choose Password" />
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span><input class="form-control" type="password" placeholder="Confirm password" />
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input class="form-control" type="text" placeholder="Enter E-mail address" />
                                    </div>
                                    <hr />
                                    <div class="form-actions">
                                        <div class="pull-left">
                                            <a href="#" class="flip-link to-login">&laquo; Back to login</a><br />
                                            <a href="#" class="flip-link to-recover">Lost password?</a>
                                        </div>
                                        <div class="pull-right"><input type="submit" class="btn btn-default" value="Register" /></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            <div class="row" style="position: absolute; top: 8%; width: 100%">
                            <div  class="col-12">
                                <div class="widget-box">
                                    <div class="widget-content tab-content">
                                        <div id="tab1" class="tab-pane">Tab One Content</div>
                                        <div id="tab2" class="tab-pane active">This is a Tab Two Content</div>
                                        <div id="tab3" class="tab-pane">This is a Tab Three Content</div>
                                    </div>  
                                    <div class="widget-title">
                                        <ul class="nav nav-tabs">
                                            <li class=""><a data-toggle="tab" href="#tab1">Home</a></li>
                                            <li class="active"><a data-toggle="tab" href="#tab2">Profile</a></li>
                                            <li class=""><a data-toggle="tab" href="#tab3">Messages</a></li>
                                        </ul>
                                    </div>
            
                                </div>
                            </div>
                        </div>-->

        </div>

        <script src="js/jquery.min.js"></script>
        <script src="js/jquery-ui.custom.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/jquery.jpanelmenu.min.js"></script>
        <script src="js/unicorn.js"></script>
        <!--<script src="//code.jquery.com/jqudery-1.10.2.js"></script>-->
        <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
        <script>
            $(function() {
                $("#main_left").draggable({
                    opacity: 0.5
                });
                $("#main_left").resizable({
                    opacity: 0.5,
                    minWidth: 405,
                    handles: "n, e, s, w ",
                    autoHide: true
                });
                jQuery("#btnLogin").click(function() {
                    jQuery.ajax({
                        url: "ajax/ajax_contact.html",
                        type: "GET",
                        success: function(html) {
                            jQuery("#divContent").fadeOut(300);
                            jQuery("#divContent").html(html);
                            jQuery("#h5Title").html("Contact");
                            jQuery("#iIconTitle").attr("class", "glyphicon glyphicon-user");
                            jQuery("#divContent").fadeIn(300);

                            jQuery(".contact-list > li").dblclick(function() {
                                jQuery.ajax({
                                    url: "ajax/ajax_toolChat.html",
                                    type: "GET",
                                    success: function(html) {
//                                        jQuery("#divToolChat").fadeOut(300);
                                        jQuery("#divToolChat").html(jQuery("#divToolChat").html() + html);
//                                        jQuery("#h5Title").html("Contact");
                                        $(".widget-box").draggable({
                                            opacity: 0.5
                                        });

                                        $(".widget-box").click(function() {
                                            $(".widget-box").each(function() {
                                                jQuery(this).css({"z-index": "1"});
                                            });
                                            jQuery(this).css({"z-index": "9999"});
                                        });
                                        jQuery("a[action='actionClose']").click(function() {
                                            jQuery(this).parent().parent().parent().parent().fadeOut(300);
                                        });
                                        jQuery("#divToolChat").fadeIn(300);

                                    },
                                    error: function() {
                                    }
                                });
                            });
                        },
                        error: function() {
                        }
                    });
                });
            });
        </script>
        <script src="js/unicorn.login.js"></script> 

        <!--<script src="js/unicorn.chat.js"></script>-->
    </body>
</html>
